@import '../../../styles/var';

@date-picket: ~'@{prefix}-date-picker';
@icon: ~'@{prefix}-icon';

.@{date-picket}-month {
  white-space: normal;
  vertical-align: top;
  display: inline-block;
  font-size: 12px;
  text-align: center;
  border-right: 2px solid @section-background;

  &:last-child {
    border-right: none;
  }

  &[data-range-index='1'] {
    .@{date-picket}-date {
      &:before {
        position: absolute;
        content: '';
        display: block;
        width: 30px;
        height: 26px;
      }
    }

    .@{date-picket}-date.is-range-start:not(.is-range-start-single) {
      &:before {
        background-color: @primary-background;
        width: 2px;
        right: 0;
      }
    }

    .@{date-picket}-date.is-range-end {
      &:before {
        background-color: @primary-background;
      }

      &:not(.is-range-hover) {
        &:before {
          width: 2px;
        }
      }
    }

    .@{date-picket}-date.is-range-hover-end:not(.is-in-range) {
      &:before {
        width: 2px;
        background-color: @primary-background;
      }
    }

    .@{date-picket}-date.is-range-hover-start:not(.is-in-range) {
      &:before {
        right: 0;
        width: 2px;
        background-color: @primary-background;
      }
    }

    .@{date-picket}-date.is-range-start.is-range-end {
      &:before {
        width: 0;
      }
    }

    .@{date-picket}-date.is-range-start.is-range-end.is-range-hover-start {
      &:before {
        width: 2px;
      }
    }

    .@{date-picket}-date.is-range-start.is-range-end.is-range-hover-start.is-range-hover-end,
    .@{date-picket}-date.is-range-start.is-range-start-single.is-range-hover-start.is-range-hover-end {
      &:before {
        width: 0;
      }
    }

    .@{date-picket}-date.is-in-range:not(.is-disabled):not(.is-selected) {
      &:before {
        background-color: @primary-background;
      }
    }

    .@{date-picket}-date.is-range-hover:not(.is-disabled):not(.is-selected):not(.is-in-range) {
      &:before {
        background-color: @primary-background;
      }
    }
  }
}

.@{date-picket}-body {
  padding: 4px;
}

.@{date-picket}-header {
  text-align: center;
  height: 28px;
  margin: -1px -1px 0 -1px;
  color: @component-background;
  background-color: @primary-color;
}

.@{date-picket}-prev,
.@{date-picket}-next {
  display: inline-block;
  vertical-align: top;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0;

  .@{icon} {
    font-size: 24px;
    margin: 2px;
  }

  &.is-hidden {
    visibility: hidden;
  }

  &.is-disabled {
    visibility: hidden;
  }

  &:hover {
    background-color: @primary-dark-color;
  }
}

.@{date-picket}-prev {
  float: left;
}

.@{date-picket}-next {
  float: right;
}

.@{date-picket}-title {
  font-size: 14px;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.@{date-picket}-weeks,
.@{date-picket}-dates {
  width: 30 * 7px;
}

.@{date-picket}-week,
.@{date-picket}-date {
  box-sizing: border-box;
  width: 30px;
  display: inline-block;
  vertical-align: top;
}

.@{date-picket}-week {
  height: 28px;
  margin-bottom: 2px;
  background-color: @component-darker-background;
  padding: 4px 0;

  &.@{date-picket}-sun,
  &.@{date-picket}-sat {
    color: @primary-color;
  }
}

.@{date-picket}-date {
  position: relative;
  cursor: pointer;
  height: 30px;
  padding: 2px 0;

  &.is-special {
    .@{date-picket}-date-inner {
      color: @primary-color;
    }
  }

  &.is-today {
    .@{date-picket}-date-inner {
      color: @primary-color;
      border: 1px solid @primary-color;
      padding: 2px 0;
    }
  }

  &:hover:not(.is-disabled):not(.is-selected) {
    .@{date-picket}-date-inner {
      background-color: @primary-background;
      color: @primary-color;
    }
  }

  &.is-selected {
    .@{date-picket}-date-inner {
      background-color: @primary-light-color;
      color: @component-background;
    }
  }

  &.is-disabled {
    cursor: default;

    .@{date-picket}-date-inner {
      opacity: 0.35;
    }
  }

  &.is-range-hover-end {
    .@{date-picket}-date-inner {
      background-color: @primary-light-color;
      color: @component-background;
    }
  }

  &.is-prev,
  &.is-next {
    visibility: hidden;
  }
}

.@{date-picket}-date-inner {
  position: relative;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 3px 0;
  margin: 0 auto;
}
